<script setup>
import { ref, computed } from 'vue'
import { InitMenuItem } from '@/assets/tools/constructors.js'
import MenuItem from '@/components/commons/base/menu/MenuItem.vue';

const props = defineProps({
  menuItems: { type: Array, default: () => [] },
  isCollapsed: { type: Boolean, default: false },
})

const defaultMenuItems = [
  new InitMenuItem('mh-0', 'Home').initRoute('/').setIconClass('i-flowbite-home-outline'),
  new InitMenuItem('mh-1', 'Surprise').initRoute('/test').setIconClass('i-flowbite-exclamation-circle-outline'),
  new InitMenuItem('mh-2', 'XXX').initRoute('/test').setIconClass('i-flowbite-adjustments-horizontal-outline'),
]

const finalMenuItems = computed(() => {
  if (props.menuItems.length !== 0) return props.menuItems
  return defaultMenuItems
})

const collapsed = computed(() => {
  return props.isCollapsed
})


const icons = ['i-flowbite-chevron-double-right-outline', 'i-flowbite-chevron-double-left-outline']
const isActive = ref(false)
const emit = defineEmits(['changeCollapse'])
const handleClick = () => {
  // emit('changeCollapse', !collapsed.value)
  emit('changeCollapse')
  isActive.value = !isActive.value
  // isActive.value = true
}

</script>

<template>
  <ul class="menu menu-horizontal rounded-box">
    <MenuItem v-for="item in finalMenuItems" :key="item.id" v-bind="item" 
      not-show-name :is-collapsed="collapsed" 
      v-show="!collapsed"
    />
    <MenuItem not-show-name :is-collapsed="collapsed"
      id="mh-last" :name="collapsed?'展开':'收起'" 
      :icon-class="collapsed? icons[0] : icons[1]"
      is-open-click-func :click-func="handleClick"
      :is-active="isActive"
    />
  </ul>
</template>

<style scoped>

</style>